<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<title><fmt:message key="CodeGenerator.title"/> </title>
<menu><fmt:message key="menu.generator.title"/></menu>
<submenu><fmt:message key="menu.generator.title"/></submenu>
<script>
$(".codeGenerator").addClass("active").parent("ul").parent("li").addClass("active open");
$(document).ready(function(){
	
	$(".checkitems").each(function(){
		var columnName = $(this).attr("id").split("-")[1]
		if($(this).prop("checked") == true){
			$("#dictCodes-"+columnName).removeAttr("disabled")
			$("#dictCodes-"+columnName).show()
		}else{
			$("#dictCodes-"+columnName).attr("disabled","disabled");
			$("#dictCodes-"+columnName).hide()
		}
	})
	
	$(".checkitems").change(function(){
		var columnName = $(this).attr("id").split("-")[1]
		if($(this).prop("checked") == true){
			$("#dictCodes-"+columnName).removeAttr("disabled")
			$("#dictCodes-"+columnName).show()
		}else{
			$("#dictCodes-"+columnName).attr("disabled","disabled");
			$("#dictCodes-"+columnName).hide()
		}
	})
	formvalidation("#selectDictCodeForm");
	$("#nextButton").click(function(){
		$("#selectDictCodeForm").submit();
	})
})
</script>
<div class="widget-box">
	<div class="widget-header widget-header-blue widget-header-flat">
		<h4 class="widget-title lighter"><fmt:message key="CodeGenerator.title"/></h4>
	</div>
	
	<div class="widget-body">
		<div class="widget-main">
			<div id="fuelux-wizard-container">
				<jsp:include page="generatorStep.jsp"></jsp:include>
				<script>
					$(".step1").addClass("active");
					$(".step2").addClass("active");
				</script>
				
				<hr />
				
				<div class="step-content pos-rel">
					<div class="step-pane active" data-step="1">
						<h3 class="lighter block green"><fmt:message key="CodeGenerator.specifyDict.title"/><br>
						<small>
						<fmt:message key="CodeGenerator.specifyDict.title.note" var="noteText"></fmt:message>
						<c:out value="${noteText}" escapeXml="false"></c:out> 
						</small>
						</h3>
						<fmt:message key="CodeGenerator.tableName.title" var="tableNameTitle"></fmt:message>
						<fmt:message key="CodeGenerator.columnName.title" var="columnNameTitle"></fmt:message>
						<fmt:message key="CodeGenerator.dataDict.title" var="dataDictTitle"></fmt:message>
						<fmt:message key="CodeGenerator.searchField.title" var="searchFieldTitle"></fmt:message>
						<fmt:message key="CodeGenerator.listField.title" var="listFieldTitle"></fmt:message>
						<fmt:message key="CodeGenerator.editField.title" var="editFieldTitle"></fmt:message>
						
						<form:form cssClass="form-horizontal" id="selectDictCodeForm" method="post" action="${ctx }/codeGenerator/listForeignKeys" modelAttribute="generatorSelect"> 
							<table id="dynamic-table" class="table table-responsive table-striped table-bordered table-hover dataTable">
								<thead>
									<tr>
										<th style="width:1px;"> </th>										
										<th>${tableNameTitle }</th>
										<th>${columnNameTitle } </th>
										<th>${dataDictTitle } </th>
										<th>${searchFieldTitle } </th>
										<th>${listFieldTitle } </th>
										<th>${editFieldTitle } </th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${columnMap}" var="item" varStatus="status">
										<input type="hidden" name="tableNames" id="tableName-${item.key }" value="${item.key }"/>
										<c:forEach items="${item.value }" var="column" varStatus="columnIndex">
											<tr>
												<td data-label="序号">${status.index + 1}</td>												
												<c:if test="${columnIndex.index == 0 }">
													<td data-label="${tableNameTitle }" rowspan="${fn:length(item.value) }"><c:out value='${item.key}'/>&nbsp;</td>
												</c:if>		
												<td data-label="${columnNameTitle }"><c:out value='${column.columnName}'/>&nbsp;</td>												
												<td data-label="${dataDictTitle }" class="dataDictSelection" id="dataDictSelection-${column.columnName }">
												<input type="checkbox" name="dictCodeColumns" value="${column.columnName}" class="checkitems" id="checkitems-${item.key}${column.columnName }">
												<form:select path="dictCodes" id="dictCodes-${item.key}${column.columnName }" multiple="false" cssStyle="display:none" cssClass="form-control required">
													<form:option value=""></form:option>
													<c:forEach items="${dataDictList}" var="dataDict">
													<form:option value="${item.key}||${column.columnName}||${dataDict.dictCode }">${dataDict.dictName }-${dataDict.dictCode }</form:option>
													</c:forEach>
												</form:select>
												</td>
												<td>
												<input type="checkbox" name="searchColumns['${item.key }']" value="${column.columnName}" class="searchitems" id="searchitems-${item.key}${column.columnName }">
												</td>
												<td>
												<input type="checkbox" name="listColumns['${item.key }']" value="${column.columnName}" class="listitems" id="listitems-${item.key}${column.columnName }">
												</td>
												<td>
												<input type="checkbox" name="editColumns['${item.key }']" value="${column.columnName}" class="listitems" id="edititems-${item.key}${column.columnName }">
												</td>
											  </tr>
										</c:forEach>
										
									</c:forEach>
								</tbody>
							</table>
						</form:form>
					</div>
				</div>
			</div>
			<hr/>
			<div class="wizard-actions">
				<button class="btn btn-prev">
					<i class="ace-icon fa fa-arrow-left"></i>
					<fmt:message key="navigation.button.prev"/>
				</button>

				<button class="btn btn-success btn-next" data-last="Finish" id="nextButton">
					<fmt:message key="navigation.button.next"/>
					<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
				</button>
			</div>
		</div>
	</div>
</div>